<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fileicon.css Demo</title>
    <link rel="stylesheet" href="fileicon.css">
    <link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.3.0/css/bootstrap.min.css">
    <style>
        .section {
            width: 100%;
        }
        .top {
            color: #FFF;
            position: relative;
            text-align: center;
        }
        .wrapper {
            width: 800px;
            margin: 0 auto;
            padding: 10px 0;
        }
        .wrapper h1,
        .wrapper h4 {
            color: #64717E;
            text-align: center;
            position: relative;
            text-shadow: 0 1px #EEE;
        }
        .title {
            width: 240px;
            border-bottom: 1px solid rgba(12,12,12,.05);
            padding: 10px 0;
            margin: 10px auto;
        }
        .file-icon {
            margin: 10px;
            display: inline-block;
        }
        .btn {
            border: 0;
            margin: 0 10px;
        }
        .btn-default {
            color: #FFF;
            background: #ADADAD;
        }
        .btn-default:hover {
            color: #FFF;
            background: #969696;
        }
        .btn-primary {
            background: #36A6FF;
        }
        .btn-primary:hover {
            background: #018FEF;
        }
        .code-example {
            margin: 20px 0;
        }
        .code-example code {
            padding: 10px 20px;
            color: #999DA1;
            background: #FFF;
            border: 1px solid #999DA1;
        }
    </style>
</head>
<body>
    <div class="top section">
        <div class="wrapper">
            <div class="title">
                <h1>Fileicon.css</h1>
                <h4>Pure CSS file icons</h4>
            </div>
            <div class="code-example text-center">
                <code>&lt;div class="file-icon file-icon-lg" data-type="doc"&gt;&lt;/div&gt;</code>
            </div>
            <div class="text-center">
                <a href="https://github.com/picturepan2/fileicon.css" class="btn btn-default">How to use</a>
                <a href="https://github.com/picturepan2/fileicon.css" class="btn btn-primary">View on GitHub</a>
            </div>
        </div>
    </div>
    <div class="demo section">
        <div class="wrapper text-center">
            <div class="title">
                <h1>Examples</h1>
            </div>
            <div class="icons">
                <div class="file-icon file-icon-xs" data-type="doc"></div>
                <div class="file-icon file-icon-xs" data-type="ppt"></div>
                <div class="file-icon file-icon-xs" data-type="xls"></div>
                <div class="file-icon file-icon-xs" data-type="png"></div>
                <div class="file-icon file-icon-xs" data-type="mp3"></div>
            </div>
            <div class="icons">
                <div class="file-icon" data-type="doc"></div>
                <div class="file-icon" data-type="ppt"></div>
                <div class="file-icon" data-type="xls"></div>
                <div class="file-icon" data-type="png"></div>
                <div class="file-icon" data-type="mp3"></div>
            </div>
            <div class="icons">
                <div class="file-icon file-icon-lg" data-type="doc"></div>
                <div class="file-icon file-icon-lg" data-type="ppt"></div>
                <div class="file-icon file-icon-lg" data-type="xls"></div>
                <div class="file-icon file-icon-lg" data-type="png"></div>
                <div class="file-icon file-icon-lg" data-type="mp3"></div>
            </div>
            <div class="icons">
                <div class="file-icon file-icon-xl" data-type="doc"></div>
                <div class="file-icon file-icon-xl" data-type="ppt"></div>
                <div class="file-icon file-icon-xl" data-type="xls"></div>
                <div class="file-icon file-icon-xl" data-type="png"></div>
                <div class="file-icon file-icon-xl" data-type="mp3"></div>
            </div>
        </div>
    </div>
    <div class="button section">
        <div class="wrapper">

        </div>
    </div>
</body>
</html>
